<script setup>
import { getOrderAPI, saveOrderAPI } from '@/apis/order'; // 导入所需的API
import { onMounted, ref } from 'vue';
import { useRoute } from 'vue-router';

const route = useRoute();
const orderInfo = ref({});

// 获取订单信息
const getOrderInfo = async () => {
  const res = await getOrderAPI(route.query.orderId);
  orderInfo.value = res.result;
};

// 页面加载时获取订单信息并检查是否需要更新
onMounted(() => {
  if (route.query.payResult === 'true') {
    // 如果支付成功，检查是否需要更新
    if (!sessionStorage.getItem('hasRefreshed')) {
      // 如果还没有更新过，设置标记
      sessionStorage.setItem('hasRefreshed', 'true');
      getOrderInfo(); // 更新订单信息
    }
  } else {
    getOrderInfo(); // 如果支付失败，也获取订单信息
  }
});

// 导出并保存订单信息到数据库
const exportOrderInfo = async () => {
  try {
    // 调用API，将订单信息保存到数据库
    await saveOrderAPI(orderInfo.value);
    alert('订单信息已成功保存到数据库！');
    
    // 生成JSON文件并下载
    const dataStr = JSON.stringify(orderInfo.value, null, 2);
    const blob = new Blob([dataStr], { type: 'application/json' });
    const url = URL.createObjectURL(blob);
    
    const a = document.createElement('a');
    a.href = url;
    a.download = 'order-info.json';
    a.click();
    
    URL.revokeObjectURL(url);
  } catch (error) {
    console.error('保存订单信息到数据库失败:', error);
    alert('保存订单信息失败，请重试！');
  }
};
</script>

<template>
  <div class="xtx-pay-page">
    <div class="container">
      <!-- 支付结果 -->
      <div class="pay-result">
        <span
          class="iconfont icon-queren2 green"
          v-if="route.query.payResult === 'true'"
        ></span>
        <span class="iconfont icon-shanchu red" v-else></span>
        <p class="tit">
          支付{{ route.query.payResult === 'true' ? '成功' : '失败' }}
        </p>
        <p class="tip">
          {{
            route.query.payResult === 'true'
              ? '我们将尽快为您发货，收货期间请保持手机畅通'
              : '请重新支付'
          }}
        </p>
        <p>支付方式：<span>支付宝</span></p>
        <p>
          支付金额：<span>¥{{ orderInfo.payMoney?.toFixed(2) }}</span>
        </p>
        <div class="btn">
          <el-button
            type="primary"
            style="margin-right: 20px"
            @click="$router.push('checkout')"
            >查看订单</el-button
          >
          <el-button @click="$router.push('/')">进入首页</el-button>
        </div>

        <!-- 导出功能 -->
        <div class="import-export">
          <!-- 导出并保存订单信息按钮 -->
          <el-button @click="exportOrderInfo">导出并保存订单信息</el-button>
        </div>

        <p class="alert">
          <span class="iconfont icon-tip"></span>
          温馨提示：小兔鲜儿不会以订单异常、系统升级为由要求您点击任何网址链接进行退款操作，保护资产、谨慎操作。
        </p>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.pay-result {
  padding: 100px 0;
  background: #fff;
  text-align: center;
  margin-top: 20px;

  > .iconfont {
    font-size: 100px;
  }

  .green {
    color: #1dc779;
  }

  .red {
    color: $priceColor;
  }

  .tit {
    font-size: 24px;
  }

  .tip {
    color: #999;
  }

  p {
    line-height: 40px;
    font-size: 16px;
  }

  .btn {
    margin-top: 50px;
  }

  .alert {
    font-size: 12px;
    color: #999;
    margin-top: 50px;
  }

  .import-export {
    margin-top: 30px;

    el-button {
      margin-right: 20px;
    }
  }
}
</style>
